<template>
    <BlogHeader/>
        <div id="grid">
            <div id="signup">
                <h3>注册账号</h3>
                <form>
                    <div class="form-elem">
                        <span>账号：</span>
                        <input type="text" v-model="signupName" placeholder="输入用户名">
                    </div>
                    <div class="form-elem">
                        <span>密码：</span>
                        <input type="text" v-model="signupPwd" placeholder="输入密码">
                    </div>
                    <div class="form-elem">
                        <button v-on:click.prevent="signup">提交</button>
                    </div>
                </form>
            </div>
            <div id="signin">
                <h3>登录账号</h3>
                <form>
                    <div class="form-elem">
                        <span>账号：</span>
                        <input type="text" v-model="signinName" placeholder="输入用户名">
                    </div>
                    <div class="form-elem">
                        <span>密码：</span>
                        <input type="password" v-model="signinPwd" placeholder="输入密码">
                    </div>
                    <div class="form-elem">
                        <button v-on:click.prevent="signin">登录</button>
                    </div>
                </form>
            </div>
        </div>
    <BlogFooter/>
</template>


<script>
    import axios from 'axios';
    import BlogHeader from '@/components/BlogHeader.vue'
    import BlogFooter from '@/components/BlogFooter.vue'

    export default{
        name: 'Login',
        components: {BlogHeader, BlogFooter},
        data: function(){
            return {
                signupName: '',
                signupPwd: '',
            }
        },
        methods: {
            signup(){
                const that = this;
                axios
                    .post('/api/user/',{
                        username: this.signupName,
                        password: this.signupPwd,
                    })
                    .then(function(response){
                        that.signupResponse = response.data;
                        alert('用户注册成功，快去登录吧！')
                    })
                    .catch(function(error){
                        alert(error.message);
                    });
                },
           signin() {
                const that = this;
                axios
                    .post('/api/token/', {
                        username: that.signinName,
                        password: that.signinPwd,
                    })
                    .then(function (response) {
                        const storage = localStorage;
                        // Date.parse(...) 返回1970年1月1日UTC以来的毫秒数
                        // Token 被设置为1分钟，因此这里加上60000毫秒
                        const expiredTime = Date.parse(response.headers.date) + 60000*60*24;
                          // 设置 localStorage
                        storage.setItem('access.myblog', response.data.access);
                        storage.setItem('refresh.myblog', response.data.refresh);
                        storage.setItem('expiredTime.myblog', expiredTime);
                        storage.setItem('username.myblog', that.signinName);
                        // 路由跳转
                        // 登录成功后回到博客首页
                        that.$router.push({name: 'Home'});

                        // 是否为管理员
                        axios
                          .get('/api/user/' + that.signinName + '/')
                          .then(function (response) {
                          storage.setItem('isSuperuser.myblog', response.data.is_superuser);
                          // 路由跳转
                          that.$router.push({name: 'Home'});
                        })
                        .catch(function(error){
                            alert(error.message);
                        })
                })
                .catch(function(error){
                    alert(error.message);
                })

            },
        }
    }
</script>

<style scoped>
    #grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    #signup {
        text-align: center;
    }
    .form-elem {
        padding: 10px;
    }
    input {
        height: 25px;
        padding-left: 10px;
    }
    button {
        height: 35px;
        cursor: pointer;
        border: none;
        outline: none;
        background: gray;
        color: whitesmoke;
        border-radius: 5px;
        width: 60px;
    }
    #signin {
    text-align: center;
    }
</style>